<template>
	<div>
		<div class="qrcode" v-if="showIframe">
			<iframe
				src="http://www.payjiehai.com/auth/wechat-qrcode-auth"
				frameborder="0"
				id="iframe"
				style="width: 400px;height: 430px;"
			></iframe>
		</div>
		<el-table border :data="tableData">
			<el-table-column prop="wxname" label="微信昵称"></el-table-column>
			<el-table-column prop="union_id" label="unionId"></el-table-column>
		</el-table>
	</div>
</template>
<script>
export default {
	data() {
		return {
			showIframe: true,
			tableData: [
			],
			wxnickname: '',
			unionid: ''
		}
	},
	mounted() {
		window.addEventListener('message', this.handleMsg)
	},
	beforeDestroy() {
		window.removeEventListener('message', this.handleMsg)
	},
	methods: {
		handleMsg(e) {
			const { data } = e
			if (!data.union_id) {
				return
			}
			this.showIframe = false
			this.tableData = [data]
			this.wxnickname = data.wxname
			this.unionid = data.union_id

			this.$emit('msg', {
				wxname: data.wxname,
				unionid: data.union_id
			})
		}
	}
}
</script>

